<template>
  <div>{{msg}}</div>
  <div>计数：{{num}}</div>
  <button @click="subSon">子组件--</button>
  <button @click="isShow = !isShow">隐藏/显示</button>
<!--  ref="oneSon"给该组件取个别名为 oneSon-->
<!--  keep-alive 缓存-->
  <keep-alive>
      <ContentSon ref="oneSon" v-if="isShow" title="父组件的title" @sonCount="contentCount"></ContentSon>
  </keep-alive>
  <ContentSon ref="twoSon" :news="news" @sonCount="contentCount"></ContentSon>
</template>

<script>
import ContentSon from "./ContentSon";
export default {
  name: "Content",
  data(){
    return{
      msg:'左侧主要内容',
      news:[
        {id:1,title:'这是新闻标题1'},
        {id:2,title:'这是新闻标题2'},
        {id:3,title:'这是新闻标题3'},
        {id:4,title:'这是新闻标题4'}
      ],
      num:0,
      isShow:true
    }
  },
  components:{
    ContentSon
  },
  methods:{
    //子组件传递过来的数据绑定的父组件方法
    contentCount(data){
      this.num += data;
    },
    //父组件自己的方法
    addCount(){
      this.num++;
    },
    //子组件--
    subSon(){
      //通过调用别名来调用子组件的sub()方法
      this.$refs.oneSon.sub();
      this.$refs.twoSon.sub();
    }
  },
  beforeUpdate() {
    console.log('Content组件模板更新之前beforeUpdate');
  },
  updated() {
    console.log('Content组件模板更新完成updated');
  },

}
</script>

<style scoped>

</style>